<template>
  <view class="favorite">
    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="onReachBottom">
      <view class="favorite-nav">
        <view class="favorite-nav__item" :class="{ active: data.resTypeEQ == (idx + 1) }"
          @click="getfavoriteslist(idx + 1)" v-for="(item, idx) in navList" :key="idx">
          {{ item }}
        </view>
      </view>
      <view class="favorite-inner">
        <view class="favorite-inner__item" v-if="targetList.length > 0" v-for="(item, index) in targetList" :key="index"
          @click="godetail(item.courseId)">
          <view class="book_name single-omit">{{ item.courseTitle }}</view>
          <view class="controls_wrapper">
            <!-- <view class="icon cancel_icon" v-if="item.flag == 1" @click="gettarget(item, -1)">取消</view>
            <view class="icon collect_icon" v-if="item.flag == -1" @click="gettarget(item, 1)">收藏</view> -->
            <image class="icon cancel_icon" v-if="item.flag == 1" @click.stop="gettarget(item, -1)"
              src="/static/tabs/shouchang.png"></image>
            <image class="icon collect_icon" v-if="item.flag == -1" @click="gettarget(item, 1)" src=""></image>
          </view>
        </view>
        <view class="favorite-inner__empty" v-else>
          <image src="/static/tabs/kong.png"></image>
          <view>暂无数据~</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { target, favoriteslist } from '@/api/user'
const navList = ref(['文章', '音频', '视频'])
const data = reactive<any>({
  pageNum: 1,  //第几页
  pageSize: 20,  //查询条目数
  resTypeEQ: 1,  //类型：Integer 类型(1图片，2音频，3视频)-等于
})
const targetList = ref<any>([])
const total = ref(0)
onLoad(async () => {

})
onShow(() => {
  getfavoriteslist(1)
})
const getfavoriteslist = async (type?: Number) => {
  data.pageNum = 1
  data.resTypeEQ = type
  targetList.value.lenght = 0
  let res: any = await favoriteslist(data)
  if (res.code == 0) {
    targetList.value = res.data.records
    targetList.value.map((item: any) => {
      item.flag = 1
    })
    total.value = res.data.total
  }
}
const gettarget = async (item: any, type: Number) => {
  let res: any = await target(item.id, type)
  if (res.code == 0) {
    item.flag = type
  }
}
const godetail = (id: any) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${id}`
  })
}
// 触底加载  
const onReachBottom = async () => {
  data.pageNum += 1
  if (total.value > targetList.value.length) {
    let res: any = await favoriteslist(data)
    if (res.code == 0) {
      targetList.value.push(res.data.records)
      total.value = res.data.total
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F8F8F8;
}

.favorite {
  &-nav {
    // border: 2rpx solid #F3F3F3;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &__item {
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      height: 80rpx;
      line-height: 80rpx;
      transition: color .25s ease-out;
      border-bottom: 6rpx solid #F8F8F8;

      &.active {
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        border-bottom: 6rpx solid #C5EBFE;
        border-radius: 6rpx;
      }
    }
  }

  &-inner {
    padding: 0 34rpx;

    &__empty {
      margin: auto;
      margin-top: 300rpx;
      width: 100%;
      text-align: center;
      color: #A8AEB4;

      image {
        width: 282rpx;
        height: 276rpx;
        text-align: center;
        margin: auto;
      }
    }

    &__item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 34rpx 0rpx;
      border-bottom: 2rpx solid #F3F3F3;

      .book_name {
        font-size: 34rpx;
        color: #2F2F2F;
        max-width: 460rpx;

        &.single-omit {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .controls_wrapper {
        display: flex;

        .icon {
          font-size: 30rpx;
          font-weight: 500;
          width: 40rpx;
          height: 40rpx;

          &.cancel_icon {
            color: #B2B2B2;
            margin-right: 26rpx;
          }

          &.collect_icon {
            font-weight: 600;
            font-size: 28rpx;
            color: #FFC0C5;
            margin-right: 26rpx;
          }
        }

      }
    }
  }
}
</style>
